<template>
  <!-- 商品组 -->
  <scroll-view class="scroll-view" :scroll-x="itemStyle.display === 'slide'" :style="{ background: itemStyle.background }">
    <view class="diy-goods">
      <view class="goods-list" :class="[`display-${itemStyle.display}`, `column-${itemStyle.column}`]"
        :style="{ padding: `${itemStyle.paddingY * 2}rpx ${itemStyle.paddingX * 2}rpx` }">
        <view class="goods-item" v-for="(dataItm, dataIdx) in dataList" :key="dataIdx" :class="[`display-${itemStyle.cardType}`]"
          :style="{ marginBottom: `${itemStyle.itemMargin * 2}rpx`, borderRadius: `${itemStyle.borderRadius * 2}rpx` }"
          @click="handleGoodsItem(dataItm.pm_goods_id)">
          <!-- 两列/三列 -->
          <view class="goods-image">
            <image class="image" mode="aspectFill" :src="dataItm.goods_image"></image>
          </view>
          <view class="goods-info">
            <view v-if="inArray('goodsName', itemStyle.show)" class="goods-name"
              :class="[ itemStyle.goodsNameRows == 'two' ? 'twoline-hide' : 'oneline-hide', `row-${itemStyle.goodsNameRows}` ]">
              {{ dataItm.goods_name }}
            </view>
            <view v-if="inArray('sellingPoint', itemStyle.show)" class="goods-selling">
              <text class="selling oneline-hide" :style="{ color: itemStyle.sellingColor }">{{ dataItm.selling_point }}</text>
            </view>
            <view v-if="inArray('goodsSales', itemStyle.show)" class="goods-sales oneline-hide">
              <text class="sales">已兑换{{ dataItm.goods_sales }}</text>
            </view>
            <view class="footer">
              <view v-if="inArray('goodsPrice', itemStyle.show)" class="goods-price oneline-hide" :style="{ color: itemStyle.priceColor }">
                <view class="points-icon">
                  <image class="image" src="/static/points/mall/points_01.png"></image>
                </view>
                <text class="value">{{ dataItm.points_price_min }}</text>
                <template v-if="dataItm.buy_type == GoodsBuyTypeEnum.POINTS_AND_MONEY.value">
                  <text class="plus">+</text>
                  <text class="value">{{ dataItm.paid_price_min }}元</text>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  import { inArray } from '@/utils/util'
  import { GoodsBuyTypeEnum } from '@/common/enum/points/mall'

  export default {
    components: {},
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },
    data() {
      return { GoodsBuyTypeEnum, inArray }
    },
    methods: {

      // 跳转积分商品详情页
      handleGoodsItem(pmGoodsId) {
        if (pmGoodsId !== undefined) {
          this.$navTo(`pages/points/mall/goods/index`, { pmGoodsId })
        }
      },

    }

  }
</script>

<style lang="scss" scoped>
  .diy-goods {
    // 解决 margin-bottom: -10px 导致的容器异常
    display: flex;
    flex-direction: column;
    // overflow: hidden; // 会导致横向无法滑动

    .goods-list {
      margin-bottom: -10px;

      // 横向滑动
      &.display-slide {
        display: flex;
        width: max-content;

        .goods-item {
          flex-shrink: 1;
          margin-right: 20rpx !important;

          &:last-child {
            margin-right: 0 !important;
          }
        }

        // 双列
        &.column-2 {
          .goods-item {
            width: 160px;
          }
        }

        // 3列
        &.column-3 {
          .goods-item {
            width: 220px;
          }
        }
      }

      // 列表平铺
      &.display-list {
        display: flex;
        flex-wrap: wrap;
      }

      // 2列
      &.column-2 {
        .goods-item {
          flex-basis: 48.6%;

          &:nth-child(2n) {
            margin-right: 0;
          }
        }
      }

      // 3列
      &.column-3 {
        .goods-item {
          flex-basis: 31.46666%;

          &:nth-child(3n) {
            margin-right: 0;
          }
        }

        .goods-name {
          font-size: 26rpx !important;
        }
      }

      // 商品内容
      .goods-item {
        flex-shrink: 0;
        background-color: #fff;
        flex: 0 1 48.6%;
        margin-right: 2.8%;
        border-radius: 16rpx;
        overflow: hidden;
        margin-bottom: 20rpx;

        &.display-card {
          box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.07);
        }

        .goods-image {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          overflow: hidden;

          &:after {
            content: '';
            display: block;
            margin-top: 100%;
          }

          .image {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .goods-info {
          padding: 20rpx;

          .goods-name {
            font-size: 27rpx;
            color: #000;
            margin-bottom: 8rpx;
            // line-height: 1.3; // 用户端

            &.row-two {
              // min-height: 68rpx; // 用户端
            }
          }

          .goods-selling {
            display: flex; // 解决文字超出无法隐藏
            font-size: 24rpx;
            margin-bottom: 8rpx;
            min-height: 38rpx;
          }

          .goods-sales {
            font-size: 24rpx;
            color: #959595;
            margin-bottom: 8rpx;

            .line {
              margin: 0 8rpx;
            }
          }
        }

        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .goods-price {
            position: relative;
            color: #ff1051;
            display: flex;
            justify-content: center;
            align-items: center;

            .points-icon {
              margin-right: 6rpx;

              .image {
                display: block;
                width: 30rpx;
                height: 30rpx;
              }
            }

            .value {
              font-size: 30rpx;
            }

            .plus {
              margin: 0 6rpx;
            }
          }
        }
      }
    }
  }
</style>